<template>
<div class="cate-tab2">
		<div class="tatile1">
			<ul>
				<li v-for="item in tabsList" :key="item.id">
						<template  v-if="item.id<2">
							<img :src="item.imgURL" />
							<h2>{{item.title}}</h2>
							<span>{{item.msg}}<img :src="item.img"></span>
							<aside>
								<h3>{{item.em}}</h3>
								<em>{{item.txt}}</em>
							</aside>
						</template>
						<template v-if="item.id>1">
							<img :src="item.imgURL" />
							<h2>{{item.title}}</h2>
							<aside>
								<h3>{{item.em}}</h3>
								<em>{{item.txt}}</em>
							</aside>
						</template>
				</li>
			</ul>
		</div>


		<div class="tatile2 swiper">
			
		</div>
		<!-- a标签，自定义选择器 -->
		<router-link to="/">
			<button class="btn">加载更多<i class="iconfont">&#xe622;</i></button>
		</router-link>
	</div>
</template>

<script>
	//1.引入vue周期函数
	import {
		onMounted
	} from 'vue';
	//2.引入Swiper的动态组件
	import Swiper, {
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	} from 'swiper';
	//3.说明swiper组件应用配置
	Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination]);

	export default {
		name: 'CategoryTab2',
		props:['propcatetab2'],
		data() {
			return {
				tabsList: [
				]
			}
		},
		watch:{
			propcatetab2(){
				this.tabsList=this.propcatetab2
			}
		},
		created(){
				this.tabsList=this.propcatetab2
		},
		setup() {
			onMounted(() => {
				new Swiper('.tatile2', {
				})
			})
		}
	}
</script>

<style scoped>
	a {
			text-decoration: none;
			color: #000000;
		}
		.tatile1 {
			overflow: hidden;
			margin-top: 0.2rem;
		}
		.tatile1 ul {
			margin-top: 0.2rem;
		}
	
		.tatile1 ul li {
			margin-top: 0.1rem;
			width: 31%;
			float: left;
			position: relative;
		}
		.tatile1 ul li:first-child{
			width: 69%;
		}
		.tatile1 ul li:first-child img{
			border-radius: 0.2rem 0 0 0;
		}
		.tatile1 ul li:nth-child(2) img
		{
			border-radius: 0 0.2rem 0 0;
		}
		.tatile1 ul li:nth-child(3)
		{
			width: 34%;
		}
		.tatile1 ul li:nth-child(4)
		{
			width: 34%;
		}
		.tatile1 ul li:nth-child(5)
		{
			width: 31%;
			float: right;
		}
		.tatile1 ul li:nth-child(3) img
		{
			border-radius: 0 0 0 0.2rem;
		}
		.tatile1 ul li:nth-child(5) img
		{
			border-radius: 0 0 0.2rem 0 ;
		}
		.tatile1 img {
			width: 98%;
			height: 3rem;
		}
		.tatile1 h2{
			position: absolute;
			color: white;
			font-size: 0.4rem;
			top: 2.3rem;
			left: 0.2rem;
			font-weight: bold;
		}
		.tatile1 span{
			position: absolute;
			background-color: #5bd07e;
			padding: 0.1rem;
			border-radius: 0.2rem 0 0.2rem 0;
			color: white;
			font-weight: bold;
			left: 0rem;
			font-size: 0.3rem;
			margin-right: 0.1rem;
		}
		.tatile1 span img{
			display: block;
			float: right;
			padding-left: 0.1rem;
			width: 0.3rem;
			height: 0.3rem;
		}
		.tatile1 aside h3 {
			margin-top: 0.1rem;
			font-size: 0.35rem;
			text-align: center;
			font-weight: bold;
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			/*与高度有关*/
			/* 超出盒子外的文本用省略号代替 */
			-webkit-box-orient: vertical;
		}
		.tatile1 aside em{
			display: block;
			font-size: 0.3rem;
			color: gray;
			text-align: center;
			line-height: 0.6rem;
		}
		.btn {
			margin-top: 0.2rem;
			font-weight: bold;
			width: 100%;
			height: 1rem;
			border-radius: 0.5rem;
			border: none;
			border: 1px solid lightgrey;
			background-color: white;
		}
	
		.btn i {
			font-size: 0.2rem;
		}
</style>
